<!-- 修改个人信息 -->
<template>
  <div>
    <!--   返回上一页 <   -->
    <div class="page-title">
      <div class="flex justify-between" style="margin: 3px 4px 3px 0">
        <div class="flex items-center">
          <van-icon
            name="arrow-left"
            size="20"
            style="border-radius: 50%"
            @click="goBack"
          ></van-icon>
          <div class="ml-[10px]" style="margin-left: 130px">个人信息</div>
        </div>
        <div class="flex items-center">
          <van-icon name="ellipsis" size="20" />
        </div>
      </div>
      <hr />
    </div>
    <div class="h-[30vh] flex flex-col justify-center items-center">
      <van-image
        round
        width="30vw"
        height="30vw"
        :src="userInfo.avatarUrl || defaultAvatarUrl"
      />
    </div>
    <div>
      <el-upload
        class="upload-demo"
        :action="uploadUrl"
        :on-success="handleAvatarSuccess"
        list-type="picture"
        :headers="{ 'access-token': useUserStore().token }"
      >
        <div style="margin-left: 130px; margin-top: -30px">
          <div class="avatar-button">
            <div>点击更换头像</div>
          </div>
        </div>
      </el-upload>
    </div>
    <div class="card">
      <el-form :rules="editRules" :model="userInfo">
        <el-form-item label="昵称" prop="name">
          <el-input v-model="userInfo.nickname" placeholder="请输入昵称" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input
            v-model="userInfo.phone"
            placeholder="请输入手机号"
            disabled
          />
        </el-form-item>
        <el-form-item label="姓  名" prop="realName">
          <el-input v-model="userInfo.realName" placeholder="请输入姓名" disabled />
        </el-form-item>
        <el-form-item label="身份证号" prop="identificationNumber">
          <el-input
            v-model="userInfo.identificationNumber"
            placeholder="请输入身份证号"
            disabled
          />
        </el-form-item>
        <div style="display: flex; justify-content: flex-end">
          <div></div>
          <div><span style="font-size: 13px; color: #79bbff"><router-link to="/setting/authentication">去实名?</router-link></span></div>
        </div>
      </el-form>
    </div>
    <div>
      <div class="my-button" @click="onSubmit">
        <div>保存修改</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import defaultAvatarUrl from "../../../public/favicon.ico";
import { onMounted, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";

import { useUserStore } from "@/store/modules/user";
import http from "@/utils/http";
const route = useRoute();
const router = useRouter();
const userStore = useUserStore();
const uploadUrl = "http://localhost:8081/app/file/upload";
// 登录信息
const userInfo = ref({
  nickname: "",
  phone: "",
  realName: "",
  identificationNumber: "",
  avatarUrl: ""
});

const handleAvatarSuccess = (res, file) => {
  userInfo.value.avatarUrl = res.data;
};

// 表单规则
const editRules = reactive({
  nickname: [
    { required: true, message: "请输入昵称", trigger: "blur", min: 2, max: 10 }
  ],
  realName: [
    { required: true, message: "请输入姓名", trigger: "blur", min: 2, max: 16 }
  ],
  identificationNumber: [
    {
      required: true,
      message: "请输入身份证号",
      trigger: "blur",
      min: 18,
      max: 18
    },
    {
      pattern:
        /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
      message: "请输入有效的身份证号",
      trigger: "blur"
    }
  ]
});
const onSubmit = () => {
  console.log("onSubmit");
  console.log("loginInfo", userInfo.value);
  // 更新数据
  http.post("/app/user/updateUserInfo", userInfo.value).then(res => {
    if (res.code === 200) {
      ElMessage.success("修改成功");
    }
    router.replace("/myRoom/setting");
  });
};
const getUserData = async () => {
  http.get(`/app/user/getUserInfo`).then(res => {
    if (res.code === 200) {
      userInfo.value = res.data;
    }
    userStore.setUserInfo(res.data);
    console.log("userInfo", userInfo.value);
  });
};
const goBack = () => {
  router.replace("/myRoom/setting");
};
onMounted(() => {
  getUserData();
});
</script>

<style scoped lang="less">
// 点击更换头像按钮
.avatar-button {
  width: 100px;
  height: 35px;
  margin: 0 10%;
  background-color: rgb(64, 158, 255);
  border-radius: 5px;
  cursor: pointer;
  div {
    margin: 15px 8%;
    color: white;
    font-size: 14px;
    line-height: 35px;
  }
}
// 点击保存按钮
.my-button {
  height: 35px;
  width: 300px;
  border-radius: 5px;
  margin: 0 10%;
  background-color: rgb(64, 158, 255);
  cursor: pointer;
  div {
    color: white;
    margin: 15px 39%;
    font-size: 16px;
    line-height: 35px;
  }
}
</style>
